<template>
    <div class="box">
        <div class="box-item">
            123
        </div>
        <div class="box-items">
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse" router unique-opened>
    <el-menu-item index="/Console" @click="additem({route:'/',name:'首页'})">
    <i class="el-icon-menu"></i>
    <span slot="title">首页</span>
  </el-menu-item>

  <el-submenu :index="item.id" v-for="item in MenuList" :key="item.id">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">{{item.name}}</span>
    </template>
      <el-menu-item :index="citem.path" v-for="(citem,index) in item.children" :key="index" @click="additem(item,citem)">
        <i class="el-icon-location"></i>{{citem.name}}
        </el-menu-item>
  </el-submenu>
</el-menu>
        </div>
    </div>
</template>



<script>
  export default {
    data(){
      return{

      }
    },
    methods: {
      additem(item,subitem){
        this.$store.commit('getnavmenu',(subitem==undefined?item:subitem))
      }
    },
    computed:{
        isCollapse(){
            return this.$store.state.isCollapse;
        },
        MenuList(){
          return this.$store.state.MenuList;
        }
    },
    watch:{
      $route(){
        this.$store.commit('getindexbreadcrumbs',this.$route.matched);
      }
    }
  }
</script>


<style scoped>
  .box-item{
    background: gray;
    padding:15px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .box-items{
    padding-bottom: 50px;
  }
</style>